@charset "UTF-8";
body {
  background: url(../images/b1.jpg);
  background-repeat: no-repeat;
  background-position: 50%; }

.contian {
  width: 312px;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden; }
  .contian .home_page {
    z-index: 99999;
    position: absolute;
    top: 0;
    left: 0; }
    .contian .home_page .bgHome {
      width: 312px;
      height: 487px; }
      .contian .home_page .bgHome > img {
        width: 100%;
        height: 100%; }
    .contian .home_page .car {
      display: block;
      width: 350px;
      height: 75px;
      background: url("../images/car.png");
      background-repeat: no-repeat;
      background-size: 78%;
      background-position-y: 0px;
      position: fixed;
      top: 230px;
      left: 58px;
      -webkit-animation: run 0.5s step-end infinite;
      animation: run 0.5s step-end infinite; }

@-webkit-keyframes run {
  0%, 100% {
    background-position-y: 0; }
  25% {
    background-position-y: -73px; }
  50% {
    background-position-y: -146px; }
  75% {
    background-position-y: -219px; } }

@keyframes run {
  0%, 100% {
    background-position-y: 0; }
  25% {
    background-position-y: -73px; }
  50% {
    background-position-y: -146px; }
  75% {
    background-position-y: -219px; } }
    .contian .home_page .carHid {
      display: none; }
    .contian .home_page .gameBtn1 {
      margin: -166px 0 0 105px; }
      .contian .home_page .gameBtn1 > img {
        width: 108px; }
    .contian .home_page .gameBtn2 {
      margin-left: 105px; }
      .contian .home_page .gameBtn2 > img {
        width: 108px; }
  .contian .moveShow3 {
    left: -312px; }
  .contian .fade {
    width: 100%;
    background: #d69713;
    position: absolute;
    left: -312px;
    z-index: -999;
    opacity: 0.8; }
    .contian .fade .count {
      padding: 18px 0 0 18px; }
      .contian .fade .count p {
        line-height: 30px; }
      .contian .fade .count p:nth-of-type(1) {
        font-size: 22px;
        color: white; }
      .contian .fade .count p:nth-of-type(2) {
        font-size: 36px;
        font-weight: bold;
        padding-left: 55px;
        margin-bottom: -15px; }
    .contian .fade .play {
      width: 290px;
      height: 360px;
      margin: 0 auto;
      padding: 32px 0;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .contian .fade .play .row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        /*鼠标移动覆盖时，触发翻转*/
        /* 卡片隐藏 */ }
        .contian .fade .play .row .card {
          width: 66px;
          height: 66px;
          line-height: 66px;
          text-align: center;
          margin: 0px auto;
          -webkit-transition: all 0.3s;
          transition: all 0.3s;
          position: relative;
          /*父类容器中 perspective 子类允许透视*/
          -webkit-perspective: 1000px;
          perspective: 1000px;
          /*使其子类变换后得以保留 3d转换后的位置*/
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; }
          .contian .fade .play .row .card .front,
          .contian .fade .play .row .card .back {
            width: 100%;
            height: 100%;
            border-radius: 5px;
            /*背景不穿透，表示翻转后便看不到正面*/
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            position: absolute;
            top: 0;
            left: 0; }
          .contian .fade .play .row .card .front {
            background-color: #f3e085;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg); }
          .contian .fade .play .row .card .back {
            background-color: white;
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg); }
            .contian .fade .play .row .card .back img {
              width: 100%;
              height: 100%;
              border-radius: 5px; }
        .contian .fade .play .row .backClick {
          -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg); }
        .contian .fade .play .row .frontClick {
          -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg); }
        .contian .fade .play .row .cardHidden {
          -webkit-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
          -webkit-transform: scale(0);
          transform: scale(0);
          -webkit-transform-origin: center;
          transform-origin: center; }
  .contian .game_end {
    background: #f5c130;
    width: 100%;
    height: 487px;
    margin-left: 312px;
    z-index: 999; }
    .contian .game_end .score1 {
      position: relative; }
      .contian .game_end .score1 > img {
        width: 218px;
        margin: 108px 0 0 48px; }
      .contian .game_end .score1 > span {
        display: inline-block;
        position: absolute;
        top: 62%;
        left: 40%;
        font-size: 55px;
        font-weight: bold; }
    .contian .game_end .clickBtn1 {
      padding-left: 39px; }
      .contian .game_end .clickBtn1 > img {
        width: 32px;
        margin: 30px 0 0 18px; }
  .contian .moveShow1 {
    -webkit-transform: translateX(-312px);
    transform: translateX(-312px); }
  .contian .ranking {
    background: #f5c130;
    z-index: 9999;
    position: absolute;
    top: 0;
    left: -312px; }
    .contian .ranking .score2 {
      width: 312px;
      height: 487px; }
      .contian .ranking .score2 > img {
        width: 100%;
        height: 100%; }
    .contian .ranking .clickBtn2 {
      padding-left: 66px;
      margin-top: -102px; }
      .contian .ranking .clickBtn2 > img {
        width: 32px;
        margin: 30px 0 0 18px; }
  .contian .share {
    z-index: 9999;
    position: absolute;
    top: 0;
    left: -312px; }
    .contian .share .bgPic {
      width: 312px;
      height: 487px; }
      .contian .share .bgPic > img {
        width: 100%;
        height: 100%; }
  .contian .moveShow2 {
    left: 0; }
